<template>
  <div id="centerRight1">
    <!-- 标题栏 -->
    <div class="title-bar d-flex pt-2 pl-2">
      <span class="fs-xl text mx-2">顶刊追踪</span>
    </div>

    <!-- 表头 -->
    <div class="header-row">
      <span class="col index-col">序号</span>
      <span class="col title-col">题目</span>
      <span class="col country-col">国家</span>
      <span class="col tech-col">技术</span>
      <span class="col issue-col">问题</span>
    </div>

    <!-- 滚动内容 -->
    <div class="body-box">
      <div class="scroll-container" ref="scrollContainer">
        <div
          class="scroll-item"
          v-for="(item, index) in displayData"
          :key="index"
        >
          <span class="col index-col">{{ getIndex(index) }}</span>
          <span class="col title-col">{{ item[0] }}</span>
          <span class="col country-col">{{ item[1] }}</span>
          <span class="col tech-col">{{ item[2] }}</span>
          <span class="col issue-col">{{ item[3] }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as XLSX from 'xlsx';
import xlsxFile from '../assets/data/data.xlsx';

export default {
  data() {
    return {
      rawData: [],
      displayData: [],
      rowNum: 4,
      scrollIndex: 0,
      timer: null
    };
  },
  mounted() {
    this.loadData();
  },
  beforeUnmount() {
    clearInterval(this.timer);
  },
  methods: {
    async loadData() {
      try {
        const response = await fetch(xlsxFile);
        const arrayBuffer = await response.arrayBuffer();
        const workbook = XLSX.read(arrayBuffer, { type: 'array' });
        const sheetName = '顶刊追踪';
        const worksheet = workbook.Sheets[sheetName];
        const data = XLSX.utils.sheet_to_json(worksheet, { header: 1 });

        this.rawData = data.slice(1); // 去掉表头
        this.displayData = this.rawData.slice(0, this.rowNum);

        this.startScroll();
      } catch (err) {
        console.error('读取 Excel 出错:', err);
      }
    },

    startScroll() {
      if (this.rawData.length <= this.rowNum) return;

      this.timer = setInterval(() => {
        this.scrollIndex = (this.scrollIndex + 1) % this.rawData.length;
        const newDisplay = [];
        for (let i = 0; i < this.rowNum; i++) {
          const idx = (this.scrollIndex + i) % this.rawData.length;
          newDisplay.push(this.rawData[idx]);
        }
        this.displayData = newDisplay;
      }, 2000);
    },

    // 获取全局序号
    getIndex(index) {
      const num = this.scrollIndex + index + 1;
      return num > this.rawData.length ? num % this.rawData.length : num;
    }
  }
};
</script>

<style scoped lang="scss">
$box-height: 320px;
$box-width: 900px;

#centerRight1 {
  padding: 12px;
  width: $box-width;
  height: $box-height;
  border-radius: 5px;

  .title-bar {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .text {
    color: #c3cbde;
    font-size: 20px;
  }

  /* 表头 */
  .header-row {
    display: flex;
    background: #020138;
    color: #fff;
    font-weight: bold;
    height: 40px;
    align-items: center;
    border-bottom: 1px solid #111;

    .col {
      text-align: center;
      /* 这里不设置 flex:1, 由各列自行控制 */
    }
    .index-col {
      flex: none;
      width: 60px;   // 序号固定宽度
    }
    .title-col {
      flex: 3;       // 题目最宽（约等于技术列 3 倍）
    }
    .country-col {
      flex: 1.2;     // 国家稍宽
    }
    .tech-col {
      flex: 1;       // 技术
    }
    .issue-col {
      flex: 1;       // 问题
    }
  }

  /* 滚动内容 */
  .body-box {
    margin-top: 5px;
    height: 210px;
    overflow: hidden;
    border-radius: 10px;
    background: #020138;

    .scroll-container {
      display: flex;
      flex-direction: column;
    }

    .scroll-item {
      display: flex;
      height: 50px;
      align-items: center;
      border-bottom: 1px solid #111;

      .col {
        text-align: center;
        color: #fff;
      }
      .index-col {
        flex: none;
        width: 60px;
      }
      .title-col  { flex: 3; }
      .country-col{ flex: 1.2; }
      .tech-col   { flex: 1; }
      .issue-col  { flex: 1; }
    }
  }
}
</style>
